<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color-panel {
            position: relative;
            width: 200px;
            height: 200px;
            margin-bottom: 20px;
        }

        .color-panel-1,
        .color-panel-2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="color-panel-wrapper">
        <div class="color-panel" style="position: relative;
            width: 200px;
            height: 200px;
            margin-bottom: 20px;">
            <div class="color-panel-1" style="position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(90deg, white, rgb(204, 0, 255));">
            </div>
            <div class="color-panel-2" style="position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));">
            </div>
        </div>
    </div>
    <canvas id="myCanvas" style="border:2px solid black;" width="200" height="200"></canvas>
    <div id="result" style="width: 50px;height: 50px;"></div>
    <script>
        const colorPanel = document.querySelector('.color-panel-wrapper');
        const renderThisHtml = colorPanel.innerHTML;
        console.log(renderThisHtml);
        const canvasEl = document.getElementById('myCanvas');
        const ctx = canvasEl.getContext('2d', { willReadFrequently: true });

        // 移动坐标原点到画布中心
        // ctx.translate(canvasEl.width / 2, canvasEl.height / 2);

        renderHtmlToCanvas(canvasEl, renderThisHtml);

        function renderHtmlToCanvas(canvas, html) {
            const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}">
<foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">${html}</div>
</foreignObject>
</svg>`;

            const svgBase64 = btoa(svg);
            const svgObjectUrl = `data:image/svg+xml;base64,${svgBase64}`;
            const tempImg = new Image();
            tempImg.crossOrigin = "Anonymous"; // 或者 "Use-Credentials"
            tempImg.addEventListener('load', function () {
                // ctx.drawImage(tempImg, -canvasEl.width / 2, -canvasEl.height / 2);
                ctx.drawImage(tempImg, 0, 0);
                URL.revokeObjectURL(svgObjectUrl);
            });

            tempImg.src = svgObjectUrl;
        }

        // 根据鼠标当前的位置，填充小矩形框的颜色
        canvasEl.onmousedown = function (e) {
            const rect = canvasEl.getBoundingClientRect();

            // 计算相对于画布中心的坐标
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            console.log('当前鼠标的位置 x：', x);
            console.log('当前鼠标的位置 y：', y);

            // 获取 ImageData 数据
            let imageData = ctx.getImageData(x, y, 1, 1);
            console.log(imageData.data);
            let rectColor = 'rgb(' + imageData.data[0] + ', ' + imageData.data[1] + ',' + imageData.data[2] + ')';
            console.warn(rectColor);
            document.getElementById('result').style.backgroundColor = rectColor;
        }
    </script>
</body>

</html>